<script lang="ts" setup>
  import { ref, onMounted, reactive, toRefs, watch } from 'vue'
  import { userChangeList, saveChangeCodeUser, selecUser } from '@/api/code'
  import { useRoute } from 'vue-router'
  import SingleAddress from '@/components/business/address/single-address/SingleAddress.vue'
  import { HMessage, HMessageBox } from '@/components/common/message'

  defineOptions({
    name: 'CodeDetailUpdateUserModal',
  })

  const props = defineProps({
    //子组件接收父组件传递过来的值
    codedetail: Object,
    modelValue: {
      type: Boolean,
      default: () => false,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'update'): void
  }>()

  const dataPage = {
    limit: 0,
    name: '',
    page: 0,
  }
  const route = useRoute()
  const relevanceUser = ref()
  const loading2 = ref(true)
  const value4 = ref('')
  const addrsDom = ref()
  const { codedetail } = toRefs(props)
  const dataForm = reactive({
    address: '',
    area: '',
    city: '',
    id: '',
    name: '',
    phone: '',
    province: '',
    remark: '',
    town: '',
    userId: 0,
    adds: null,
  })

  const reset = () => {
    dataForm.address = ''
    dataForm.area = ''
    dataForm.city = ''
    dataForm.id = ''
    dataForm.name = ''
    dataForm.phone = ''
    dataForm.province = ''
    dataForm.remark = ''
    dataForm.town = ''
    dataForm.userId = 0
    dataForm.adds = null
    value4.value = ''
  }

  // 地址更新事件
  const handleAddressUpdate = (address: {
    province: string
    area: string
    city: string
    town: string
  }) => {
    Object.assign(dataForm, { ...address })
  }

  // 确定事件
  const saveLoading = ref(false)
  const onConfirm = () => {
    const data = { ...dataForm }
    delete data.adds
    saveLoading.value = true
    saveChangeCodeUser(data).then((res) => {
      if (res.data.code == 20000) {
        HMessage.success('保存成功')
        onCancel()
        emits('update')
        reset()
      } else {
        HMessageBox.error(res.data.message)
      }
      saveLoading.value = false
    })
  }
  const onCancel = () => {
    visible.value = false
    emits('update:modelValue', visible.value)
  }

  const changeSel = (val) => {
    if (!val) {
      dataForm.userId = null
      dataForm.address = ''
      dataForm.area = ''
      dataForm.city = ''
      dataForm.name = ''
      dataForm.phone = ''
      dataForm.province = ''
      dataForm.town = ''
      dataForm.adds = null
      if (addrsDom.value) {
        addrsDom.value.clearAddress()
      }
    }
  }
  const getinformation = (val) => {
    dataForm.userId = val.id
    dataForm.address = val.address
    dataForm.area = val.area
    dataForm.city = val.city
    dataForm.name = val.name
    dataForm.phone = val.phone
    dataForm.province = val.province
    dataForm.town = val.town
    dataForm.adds = null
    if (addrsDom.value) {
      addrsDom.value.clearAddress()
    }
    dataForm.adds = {
      province: val.province,
      area: val.area,
      city: val.city,
      town: val.town,
    }
  }

  const remoteMethod = (val) => {
    dataPage.name = val
    loading2.value = true
    selecUser(dataPage).then((res) => {
      relevanceUser.value = res.data.data.rows
      loading2.value = false
    })
  }

  const visible = ref(false)

  watch(
    props,
    (value) => {
      visible.value = value.modelValue
      if (value.codedetail && value.codedetail.id) {
        dataForm.id = value.codedetail.id
      }
    },
    { immediate: true, deep: true },
  )

  onMounted(() => {
    let data = {
      limit: 0,
      page: 0,
    }
    selecUser(dataPage).then((res) => {
      relevanceUser.value = res.data.data.rows
      loading2.value = false
    })
    userChangeList(data, route.params.id).then((res) => {
      // error
    })
  })
</script>

<template>
  <h-drawer
    v-model="visible"
    title="变更公司"
    :width="1200"
    :loading="saveLoading"
    unit="px"
    @close="onCancel"
  >
    <!-- 产品信息 -->
    <h4 class="title_text">产品信息</h4>
    <el-table class="table_list" style="width: 100%" :data="[codedetail]" :border="true">
      <!-- 产品名称 -->
      <el-table-column prop="goodsName" label="产品名称" width="180" />

      <!-- 产品型号 -->
      <el-table-column prop="model" label="产品型号" width="180" />

      <!-- 产品品牌 -->
      <el-table-column prop="brand" label="产品品牌" width="180" />

      <!-- 产品规格 -->
      <el-table-column prop="goodsSpecName" label="产品规格" width="180" />

      <!-- 质保开始时间 -->
      <el-table-column prop="warrantyStartTime" label="质保开始时间" width="180" />

      <!-- 质保到期时间 -->
      <el-table-column prop="warrantyEndTime" label="质保到期时间" width="180" />
    </el-table>

    <!-- 当前所属 -->
    <h4 class="title_text">当前所属</h4>
    <el-table class="table_list" style="width: 100%" :data="[codedetail]" :border="true">
      <!-- 公司名称 -->
      <el-table-column prop="username" label="公司名称" width="180" />

      <!-- 联系手机 -->
      <el-table-column prop="phone" label="联系手机" width="180" />

      <!-- 等级地址 -->
      <el-table-column label="登记地址">
        <template #default="scope">
          {{ scope.row.province }} {{ scope.row.city }} {{ scope.row.area }}
          {{ scope.row.city }}&nbsp;{{ scope.row.address }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 变更所属人 -->
    <h4 class="title_text">变更所属人</h4>
    <el-table style="width: 100%" :border="true" :data="[dataForm]">
      <!-- 公司信息 -->
      <el-table-column prop="date" width="220">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>公司信息</span>
        </template>

        <el-select
          v-model="value4"
          placeholder="请选择关联公司"
          filterable
          clearable
          remote-show-suffix
          :remote-method="remoteMethod"
          :loading="loading2"
          remote
          @change="changeSel"
        >
          <el-option
            v-for="(item, index) in relevanceUser"
            :key="index"
            :disabled="item.name == codedetail.username && item.phone == codedetail.phone"
            :value="item.id"
            :label="item.name + ' ' + item.phone"
            @click="getinformation(item)"
          />
        </el-select>
      </el-table-column>

      <!-- 联系手机 -->
      <el-table-column prop="phone" width="180">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>联系手机</span>
        </template>
        <template #default="item">
          <el-input v-model.trim="item.row.phone" />
        </template>
      </el-table-column>

      <!-- 登记地址 -->
      <el-table-column prop="add" width="240">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>登记地址</span>
        </template>
        <template #default="item">
          <SingleAddress
            ref="addrsDom"
            :address="item.row.adds || { province: '' }"
            @change="handleAddressUpdate"
          />
        </template>
      </el-table-column>

      <!-- 详细地址 -->
      <el-table-column prop="address" width="300">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>详细地址</span>
        </template>
        <template #default="item">
          <el-input
            v-model.trim="item.row.address"
            maxlength="200"
            resize="both"
            show-word-limit
            type="textarea"
            class="detail_address_textarea"
          />
        </template>
      </el-table-column>

      <!-- 备注 -->
      <el-table-column prop="remark" label="备注" width="200">
        <template #default="item">
          <el-input
            v-model.trim="item.row.remark"
            clearable
            maxlength="200"
            resize="both"
            show-word-limit
            type="textarea"
            class="remark_textarea"
          />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <HButton is-modal type="primary" @click="onConfirm">确定</HButton>
      <HButton is-modal @click="onCancel">取消</HButton>
    </template>
  </h-drawer>
</template>

<style lang="scss" scoped>
  .title_text {
    font-size: 12px;
    padding-left: 6px;
    border-left: 3px solid #007cff;
    margin-bottom: 10px;
  }
  .table_list {
    margin-bottom: 15px;
  }
  .fa-asterisk {
    color: #ff5733;
    font-size: 2px;
    transform: scale(0.5);
  }
  .dialog-footer {
    text-align: right;
    margin-top: 10px;
    .btn_dialog {
      color: #fff;
      width: 3.2vw;
    }

    .btn_dialog_Cancel {
      width: 3.2vw;
    }
  }
  :deep(.el-select) {
    width: 100% !important;
  }

  .detail_address_textarea {
    :deep(.el-textarea__inner) {
      width: 100% !important;
      min-height: 28px !important;
      height: 28px;
      max-height: 200px !important;
    }
  }

  .remark_textarea {
    :deep(.el-textarea__inner) {
      width: 100% !important;
      min-height: 28px !important;
      height: 28px;
      max-height: 320px !important;
    }
  }
</style>
